<template>
  <div class="home">
    <div class="box">
      <div class="t">
        <img src="../assets/后台管理图片/logo.png" class="img" />
      </div>
      <div class="b">
        <el-form
          ref="FormRef"
          :model="user"
          :rules="rules"
          class="demo-ruleForm"
          :size="formSize"
        >
          <el-form-item prop="username">
            <el-input v-model="user.username" :prefix-icon="Avatar"> </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="user.password"
              :prefix-icon="Lock"
              type="password"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="dl">登录</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { toRefs, reactive, ref, unref } from "vue";
import { Avatar, Lock } from "@element-plus/icons-vue";
import { loginApi } from "../http/api.js";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
export default {
  setup(props) {
    //   路由
    const router = useRouter();
    // 获取元素
    const FormRef = ref(null);
    // 为什么？
    // 在vue2.x中，可以通过给元素添加ref='xxx'属性，然后在代码中通过this.$refs.xxx获取到对应的元素
    // 然而在vue3中时没有$refs这个东西的，因此vue3中通过ref属性获取元素就不能按照vue2的方式来获取
    // vue3需要借助生命周期方法，原因很简单，在setup执行时，template中的元素还没挂载到页面上，所以必须在mounted之后才能获取到元素。
    const obj = reactive({
      user: {
        username: "admin",
        password: "123456",
      },
      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名称",
            trigger: "blur",
          },
          {
            min: 5,
            max: 20,
            message: "长度在 5到 20 个字符",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入用户密码",
            trigger: "blur",
          },
          {
            min: 5,
            max: 20,
            message: "长度在 5到 20 个字符",
            trigger: "blur",
          },
        ],
      },
    });
    // 登录
    let dl = () => {
      FormRef.value.validate(async (valid) => {
        if (valid) {
          const res = await loginApi(obj.user);
          console.log("用户的数据", res);
          // 存储token值
          sessionStorage.setItem("token", res.token);
          router.push("/home");
          obj.user = {
            username: "",
            password: "",
          };
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    };
    // 表单重置
    const resetForm = () => {
      const form = unref(FormRef);
      form.resetFields();
    };
    return {
      ...toRefs(obj),
      FormRef,
      Avatar,
      Lock,
      dl,
      resetForm,
    };
  },
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  background-color: #2b4b6b;
  .box {
    width: 28%;
    box-sizing: border-box;
    padding: 30px 30px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 15px #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .t {
      width: 140px;
      height: 140px;
      border-radius: 50%;
      position: absolute;
      top: -80px;
      left: 32%;
      background-color: #fff;
      box-sizing: border-box;
      border: 20px solid #fff;
      box-shadow: 0 0 15px #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      .img {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background-color: #eee;
      }
    }
    .b {
      margin-top: 50px;
      ::v-deep .el-form-item__content {
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}
</style>
